<template>
  <div class="DataCenterMgt">
    <div class="content-left">
      <div class="content-li">
        <div class="content-title">客户</div>
        <div class="content-code" :class="active==0?`active`:``" @click="getActive(0)">客户统计</div>
        <div class="content-code" :class="active==1?`active`:``" @click="getActive(1)">留存情况</div>
      </div>
      <div class="content-li">
        <div class="content-title">客户群</div>
        <div class="content-code" :class="active==2?`active`:``" @click="getActive(2)">客户群统计</div>
        <div class="content-code" :class="active==3?`active`:``" @click="getActive(3)">客户群监测</div>
        <div class="content-code" :class="active==4?`active`:``" @click="getActive(4)">群成员分析</div>
        <div class="content-code" :class="active==5?`active`:``" @click="getActive(5)">指定成员数据</div>
      </div>
      <div class="content-li">
        <div class="content-title">回话数据</div>
        <div class="content-code" :class="active==6?`active`:``" @click="getActive(6)">私聊统计</div>
        <div class="content-code" :class="active==7?`active`:``" @click="getActive(7)">私聊回复率</div>
        <div class="content-code" :class="active==8?`active`:``" @click="getActive(8)">SOP回复率</div>
      </div>
      <div class="content-li">
        <div class="content-title">其他</div>
        <div class="content-code" :class="active==9?`active`:``" @click="getActive(9)">企微号分析</div>
        <div class="content-code" :class="active==10?`active`:``" @click="getActive(10)">功能使用</div>
        <div class="content-code" :class="active==11?`active`:``" @click="getActive(11)">使用量统计</div>
      </div>
    </div>
    <div class="content-right">
<!--      客户统计-->
    <customerStatistics v-if="active==0"></customerStatistics>
<!--留存情况-->
      <retentionSituation v-if="active==1"></retentionSituation>
<!--      客户群统计-->
      <customerGroupStatistics v-if="active==2"></customerGroupStatistics>
<!--      客户群监测-->
      <customerGroupMonitoring v-if="active==3"></customerGroupMonitoring>
<!--      群成员分析-->
      <groupMemberAnalysis v-if="active==4"></groupMemberAnalysis>
<!--      指定成员数据-->
       <specifyMemberData v-if="active==5"></specifyMemberData>
<!--      私聊统计-->
      <privateChatStatistics v-if="active==6"></privateChatStatistics>
      <!--      私聊回复率-->
      <privateChatResponseRate v-if="active==7"></privateChatResponseRate>
<!--      SOP回复率-->
      <SOPResponseRate v-if="active==8"></SOPResponseRate>
<!--       企微号分析-->
      <WeChatAnalysis v-if="active==9"></WeChatAnalysis>
<!--      功能使用-->
      <FunctionUsage v-if="active==10"></FunctionUsage>
<!--      使用量统计-->
      <UsageStatistics v-if="active==11"></UsageStatistics>
    </div>
  </div>
</template>
<script>

export default {
  name: "DataCenterMgt",
  components: {
    'customerStatistics': () => import('./customerStatistics.vue'),
    'retentionSituation': () => import('./retentionSituation.vue'),
    'customerGroupStatistics': () => import('./customerGroupStatistics.vue'),
    'customerGroupMonitoring': () => import('./customerGroupMonitoring.vue'),
    'groupMemberAnalysis': () => import('./groupMemberAnalysis.vue'),
    'specifyMemberData':()=> import('./specifyMemberData.vue'),
    'privateChatStatistics':()=> import('./privateChatStatistics.vue'),
    'privateChatResponseRate':()=> import('./privateChatResponseRate.vue'),
    'SOPResponseRate':()=> import('./SOPResponseRate.vue'),
    'WeChatAnalysis':()=> import('./WeChatAnalysis.vue'),
    'FunctionUsage':()=> import('./FunctionUsage.vue'),
    'UsageStatistics':()=> import('./UsageStatistics.vue'),
  },
  data() {
    return {
      active: 0,
    }
  },
  methods: {
    getActive(index) {
      this.active = index;
    }
  },
}
</script>

<style scoped lang="scss">
.DataCenterMgt {
  display: flex;
  background: #fff;
  border-radius: 6px;
  margin: 10px;
  height: 100%;


  .content-left {
    width: 150px;
    border-right: 1px solid #eee;
    padding: 10px 20px;
    height: 100%;
    overflow-y: auto;
    .content-li {
      margin-bottom: 20px;

      .content-title {
        font-size: 12px;
        color: rgba(0, 0, 0, .45);
        margin-bottom: 4px;
        font-weight: 400;
      }

      .content-code {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0px 10px;
        border-radius: 5px;
        cursor: pointer;
        &.active {
          background-color: #ebf2ff;
          border-radius: 5px;
        }

      }
    }
  }

  .content-right {
   padding: 10px 20px;
    flex: 1;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
